<template>
    <div class="scene-bank-detail">
        <Row>
            <Col span="24" style="background-color: var(--card-body-bgcolor);border-radius: 10px;padding: 20px 0">
                <div class="class-top">
                    <div class="class-title-wrap">
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'state'}" @click="tabName = 'state'">概况</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'state'}"></div> -->
                        </div>
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'document'}" @click="tabName = 'document'">描述文档</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'document'}"></div> -->
                        </div>
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'topo'}" @click="tabName = 'topo'">工程模板</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'topo'}"></div> -->
                        </div>
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'tool'}" @click="tabName = 'tool'">工具包</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'tool'}"></div> -->
                        </div>
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'video'}" @click="tabName = 'video'">相关视频</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'video'}"></div> -->
                        </div>
                        <div class="class-title">
                            <div class="class-title-all" :class="{'active': tabName === 'environment'}" @click="tabName = 'environment'">环境实例</div>
                            <!-- <div class="class-title-line" :class="{'line-active': tabName === 'environment'}"></div> -->
                        </div>
                    </div>
                </div>
                <Divider />
                <div class="scene-bank-detail-wrap">
                    <template v-if="tabName === 'state'">
                        <div class="state-content">
                            <div class="left">
                                <template v-if="detailObj.eventList.length">
                                    <!-- <div class="left-title">
                                        <div>场景网络拓扑接口</div>
                                        <div>
                                            关联工程：
                                        </div>
                                        <div>
                                            部署
                                        </div>
                                    </div> -->
                                    <img :src="`/files${detailObj.eventList[0].picUrl}`" alt="template" style="width:100%; height: 100%" :onerror="defaultImg1">
                                </template>
                                <template v-else>
                                    <div style="width: 100%; height: 100%; line-height: 100%; display: flex; justify-content: center; align-items: center;">
                                        尚未绑定工程模板，前往<span class="my-btn" @click="tabName = 'topo'">绑定工程模板</span>
                                    </div>
                                </template>
                            </div>
                            <div class="right">
                                <div class="sub-item">
                                    <h2>场景描述</h2>
                                    <div class="sub-item-content">
                                        {{current.description}}
                                    </div>
                                </div>
                                <div class="sub-item">
                                    <h2>工具库</h2>
                                    <div class="sub-item-content">
                                        <template v-if="detailObj.toolList.length">
                                            <div class="sub-item-list" v-for="(item, index) in detailObj.toolList" :key="item.id">
                                                <div>{{index + 1}}、</div>
                                                <div>{{item.name}}</div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            尚无工具，前往<span class="my-btn" @click="tabName = 'tool'">添加工具</span>
                                        </template>
                                    </div>
                                </div>
                                <div class="sub-item">
                                    <h2>视频</h2>
                                    <div class="sub-item-content">
                                        <template v-if="detailObj.videoList.length">
                                            <div class="sub-item-list" v-for="(item, index) in detailObj.videoList" :key="item.id">
                                                <div>{{index + 1}}、</div>
                                                <div>{{item.name}}</div>
                                                <div class="my-btn" @click="showDocumentDetail(item)">播放</div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            尚无视频，前往<span class="my-btn" @click="tabName = 'video'">添加视频</span>
                                        </template>
                                    </div>
                                </div>
                                <div class="sub-item">
                                    <h2>脚本</h2>
                                    <div class="sub-item-content">
                                        <template v-if="detailObj.otherList.length">
                                            <div class="sub-item-list" v-for="(item, index) in detailObj.otherList" :key="item.id">
                                                <div>{{index + 1}}、</div>
                                                <div>{{item.name}}</div>
                                            </div>
                                        </template>
                                        <template v-else>
                                            尚无脚本，前往<span class="my-btn" @click="tabName = 'tool'">添加脚本</span>
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-else-if="['topo','video','document','tool'].includes(tabName)">
                        <div style="display: flex;justify-content: flex-end;align-items: center;margin-bottom: 20px;">
                            <Button type="primary" ghost class="md-add-jh" @click="showModalBtn()" v-show="tabName === 'document'">上传描述文档</Button>
                            <Button type="primary" ghost class="md-add-jh" :disabled="tableObj.list.length > 0" 
                                @click="createProModal = true;" v-show="tabName === 'topo'">绑定工程模板</Button>
                            <Button type="primary" ghost class="md-add-jh" @click="showModalBtn('', true,)" v-show="['tool',].includes(tabName)">绑定工具</Button>
                            <Button type="primary" ghost class="md-add-jh" @click="showModalBtn('', true,true)" v-show="['video'].includes(tabName)">绑定视频</Button>
                            <Input v-model.trim="querys.name" placeholder="名称" @on-change="changePage(1)" 
                                v-show="['document', 'tool','video'].includes(tabName)" clearable style="width:150px;margin-left: 15px;"></Input>
                            <Select filterable v-model="querys.type" style="width: 150px;margin-left: 15px;" @on-change="changePage(1)" clearable v-show="['tool'].includes(tabName)">
                                <Option :value="1">工具</Option>
                                <Option :value="2">脚本</Option>
                                <!-- <Option :value="3">视频</Option> -->
                            </Select>
                            <Button class="header-btn" type="primary" ghost v-show="tabName !== 'topo'||tabName !== 'environment'"
                                style="height: 32px;margin-left: 5px;" @click="refreshList()"><i class="el-icon-refresh-right" /></Button>
                        </div>
                        <div v-if="tableObj.list.length === 0" class="defGraphWrap">
                            <div class="defGraph"></div>
                            <div class="graphText">暂无信息</div>
                        </div>
                        <template v-else>
                            <Table
                                :columns="tableObj.columns"
                                :data="tableObj.list"></Table>
                            <Page :total='tableObj.total' :page-size="querys.pageSize" show-total show-elevator 
                                v-show="tabName !== 'topo'"
                                style="display: flex; justify-content: flex-end;"
                                @on-change="changePage" :current="querys.pageIndex"/>
                        </template>
                    </template>
                    <template v-else>
                         <div class="btn-group">
                        <Progress :percent="deployProcess" :stroke-width="20" :status="progresStatus" text-inside v-show="[9, 13, 15].includes(deployStatus)" style="margin-bottom: 10px;"/>
                        <div>
                            <Button type="primary" @click="creatadndeploy" v-show="(this.$route.query.projectId==null||this.$route.query.projectId==undefined)&&(this.projectId==null||this.projectId=='')" :loading="creatLoading" :disabled="this.prjTmplId==''||this.prjTmplId==null||this.prjTmplId==undefined">创建并部署</Button>
                            <Button type="primary" @click="deploy" :loading="deployLoading && [9, 13, 15].includes(deployStatus)" 
                             v-show="this.$route.query.projectId!=null||this.$route.query.projectId!=undefined||(this.projectId!=null&&this.projectId!='')"
                                :disabled="deployLoading || [3, 9, 13, 15].includes(deployStatus)"
                                style="margin-right: 6px;">部署</Button>
                            <Poptip
                                confirm
                                title="确定要销毁吗?"
                                :disabled="destroyLoading || [9, 13, 15].includes(deployStatus)"
                                v-show="[3, 13].includes(deployStatus)"
                                @on-ok="destroy">
                                <Button type="error" :loading="destroyLoading || deployStatus === 9">销毁</Button>
                            </Poptip>
                        </div>
                    </div>
                        <div >
						    <Button type="warning"  size="small" class="ml4" @click="stopRecording" :disabled="!videoStart" v-if="screenRecording==1" style="float: right;">结束录制</Button>
                            <Button type="warning" size="small" class="ml4" @click="startRecording" :disabled="videoStart" v-if="screenRecording==1" style="float: right;margin-right:30px">屏幕录制</Button>
                        </div>
                        <environ-manage ref="environmanage"></environ-manage>
                    </template>
                </div>
            </Col>
        </Row>
        <!--上传文件-->
        <Modal
            v-model="uploadFileModal"
            width="600"
            :footer-hide="true"
            :title="modalTitle" >
            <Form ref="formItem" :model="formItem" :rules="formItemRule" :label-width="isTool ? 110 : 80">
                <FormItem label="名称" prop="name" key="name">
                    <Input v-model.trim="formItem.name" placeholder="请输入中文、数字、字母、英文括号、下划线或者中划线，长度1~32个字符"></Input>
                </FormItem>
                <FormItem label="文件类型" prop="type" v-if="isTool&&tabName!='video'" key="type">
                    <Select filterable v-model="formItem.type" clearable placeholder="请选择工具类型" @on-change="changeType" >
                        <Option :value="1" v-if="tabName=='tool'">工具</Option>
                        <Option :value="2" v-if="tabName=='tool'">脚本</Option>
                        <Option :value="3" v-if="tabName=='video'">视频</Option>
                    </Select>
                </FormItem>
                <FormItem label="是否绑定已有工具" prop="isUpload" v-if="isTool&&tabName!='video'" key="isUpload">
                    <RadioGroup v-model="formItem.isUpload" @on-change="changeIsUpload">
                        <Radio :label="0" :disabled="formItem.type === 3">是</Radio>
                        <Radio :label="1">否</Radio>
                    </RadioGroup>
                </FormItem>
                <template v-if="formItem.isUpload === 0 && isTool && formItem.type !== 3">
                    <FormItem :label="formItem.type === 1 ? '工具' : '脚本'" prop="fileId" key="fileId">
                        <Select filterable v-model="formItem.fileId" clearable  @on-change="changeTool">
                            <Option :value="String(item.id)" v-for="item in formItem.type === 1 ? toolList : scriptList" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </FormItem>
                </template>
                <FormItem :label="tabName === 'video'? '上传视频':'上传文件'" prop="file" v-else key="file">
                    <Upload
                        ref='uploadFile' :action="upLoadUrl" :before-upload="handleUploadIcon" :show-upload-list="false">
                        <Button icon="ios-cloud-upload-outline" :disabled="loading">{{tabName === 'video'? '上传视频':'上传文件'}}</Button>
                    </Upload>
                    <div class="uploadTypeWrap">
                        查看上传类型：
                        <Tooltip :content="formatStr" placement="top-start" width="200">
                            <Icon type='ios-help-circle' color='rgb(255, 153, 0)' />
                        </Tooltip>
                    </div>
                    <div v-if="formItem.file && formItem.file.name">
                        <p>文件名: {{ formItem.file.name}}</p>
                        <p>大小：<span v-text="fileSize"></span></p>
                        <Progress :percent="progress"></Progress>
                        <p>速度：<span v-text="speed"></span></p>
                    </div>
                    <div v-else-if="formItem.fileName">
                        <p>文件名: {{ formItem.fileName}}</p>
                    </div>
                </FormItem>
                <FormItem label="事件描述" prop="description" key="description">
                    <Input v-model.trim="formItem.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述信息"></Input>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="formBtn('formItem')" :loading="loading">确定</Button>
                    <Button @click="uploadFileModal = false,video=false" style="margin-left: 8px">取消</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="createProModal" width="600"
            :closable="!addDeviceModel"
            class="creatProModal"
            :footer-hide="true"
            title="绑定工程模板">
            <Form ref="createdProjectForm" :model="createdProjectForm" :rules="createdProjectRuleValidate" :label-width="80">
                <FormItem label="名称" prop="name">
                    <Input v-model.trim="createdProjectForm.name"  placeholder="请输入中文、数字、字母、英文括号、下划线或者中划线，长度1~40个字符"></Input>
                </FormItem>
                <FormItem label="描述" prop="description">
                    <Input v-model.trim="createdProjectForm.description" type="textarea" :maxlength="200" :autosize="{minRows: 2,maxRows: 5}" placeholder="描述"></Input>
                </FormItem>
                <FormItem label="工程模板" prop="prjTmplId">
                    <Button type="primary" ghost @click="toPlateTabs(1)">选择</Button>
                    <div class="chose-wrap" v-show="createdProjectForm.prjTmplId != ''">
                        <div style="display: flex;justify-content: flex-start;align-items: center">
                            <img src="../../assets/exper/template.png" class="chose-s-icon">
                            <div class="chose-name">{{createdProjectForm.prjTmplName}}</div>
                        </div>
                        <img src="../../assets/globalIcon/dis-del.png" style="width: 13px;height: 14px;cursor: pointer" @click="clearTemp">
                    </div>
                </FormItem>
                <FormItem>
                    <Button type="primary" @click="createdProSubmit('createdProjectForm')" :loading="submitProjectLoading">确定</Button>
                    <Button @click="createProModal = false;" style="margin-left: 8px">取消</Button>
                </FormItem>
            </Form>
        </Modal>
        <Modal v-model="bigModal" :footer-hide="true" width="1000">
            <div class="modal-img-wrap">
                <img :src="setTemplateImgSrc" alt="template" style="width:100%;" :onerror="defaultImg1">
            </div>
        </Modal>
        <Modal v-model="videoModal" :title="videoName" :footer-hide="true" width="800" :mask-closable="false" @on-visible-change="modalChange">
			<!--disablePictureInPicture="true"-->
			<div v-if="isFlv" class="video" style="width:100%;margin-top:10px;height: 440px;"></div>
			<video v-if="videoModal && !isFlv" :src="curVideoPath" controls="controls" controlsList='nodownload noremote footbar' style="width:100%;" autoplay id="learnVideo">
				您的浏览器不支持 video 标签。
			</video>
		</Modal>
        <!--工程模板-->
        <DrawerPage 
            select
            v-model="addDeviceModel"
            title="工程模板"
            :columns="templateCol" 
            :data="templateList" 
            :loading="proTemLoading" 
            :total="templateTotal" 
            :size.sync="templatePageSize" 
            :page.sync="templatePage"
            @queryFun="toPlateTabs"
        >
            <template slot="search">
                <i-select clearable  placeholder="可见范围" v-model="templateVisibility" style="width: 150px;margin-left: 15px;" @on-change="toPlateTabs(1)">
                    <i-option value="range">平台</i-option>
                    <i-option value="system">系统</i-option>
                    <i-option value="company">单位</i-option><i-option value="person">个人</i-option>
                </i-select>
                <Input v-model.trim="searchTemplateName" placeholder="模板名称" clearable @on-change="toPlateTabs(1)" style="width: 180px;margin-left: 15px;"/>
                <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshTem()"><i class="el-icon-refresh-right" /></Button>
            </template>
        </DrawerPage>
    </div>
</template>
<script>
import { clearProject } from '@/api/competition'
 import { getProjects, queryNetworkList } from '@/api/drill_compete'
import { creatBlankPro, deployProject, getDeployProgress } from '@/api/homer'
import { getstatusbyprjid } from '@/api/drill'
    import RecordRTC from 'recordrtc'
    import { getEventlist, addEventDocument, deleteEventDocument, getEventDocumentlist, updateEventDocument,
        addEventProject, deleteEventProject, getEventProjectlist, updateEventProject, addEventTool, deleteEventTool,
        getEventToollist, updateEventTool, getAlreadyToollist, downloads,eventBindProject } from '@/api/event' 
    import { getToolList } from '@/api/tool'
    import { mergeFiles } from '@/api/uploadFile'
    import { getTemplateData } from '@/api/proTemplate.js'
    import EnvironManage from './environManage'
    import { validateName } from '@/libs/reg'
    import { loadConfiguration } from '@/api/drill'
    import { getDictInfoByName } from '@/api/dict'

    export default {
        props: {},
        components: {
            EnvironManage
        },
        data() {
            const validateUpload = (rule, value, callback) => {
                if (!this.formItem.file && !this.formItem.fileName) {
                    callback(new Error('请选择上传文件'))
                } else {
                    callback()
                }
            }

            return {
                flag: 0, //标记成功的次数
                filedArr: [],//承装切片的容器
                oldTime:0,
                creatLoading:false,
                prjTmplId:'',
                projectId:'',
                deployLoading: false,
                destroyLoading: false,
                deploySucceed: false,
                destroySucceed: false,
                 deployProcess: 0, //部署进度
                deployStatus: 0, //部署状态
                replaceTotal: 0,
                generateImageList: [], //生成的镜像列表
                progresStatus: 'active',
                videoName:'',
                videoModal:false,
                isFlv:false,
                videoPath:'',
                videoStart: false,
                screenRecording:0,
                video:false,
                detailObj: {
                    eventList: [],
                    documentList: [],
                    toolList: [],
                    videoList: [],
                    otherList: []
                },
                tableHeight: '',
                docsArr: ["doc","docx","pdf"],
                videoArr: ["mp4","webm","ogv","ogg","3gp","3g2","m4v","mpg","vob","fli","mkv","asf","asx","wmv","flv","avi"],
                othersArr: ["zip","bz2","7z","cab","rar","epub", "exe", "json"],
                scriptArr: ["py","sh","json"],
                formatStr: 'doc,docx,pdf',
                toolList: [],
                scriptList: [],
                isTool: false,
                defaultImg1: 'this.src="' + require('../../assets/home/defImg.png') + '"',
                templateCol:[
                    {
                        title:'序号',
                        type:'index',
                        width:60,
                        align:'left',
                        tooltip: true
                    },
                    {
                        title:'模板名称',
                        key:'name',
                        width:140,
                        align:'left',
                        tooltip: true
                    },
                    {
                        title:'可见范围',
                        key:'visibility',
                        width:90,
                        align:'left',
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.visibility === 'share'){
                                text = '单位'
                            }else if(params.row.visibility === 'private'){
                                text = '个人'
                            }else{
                                text = '系统'
                            }
                            return h('div',text)
                        }
                    },
                    {
                        title:'创建者',
                        key:'creatorName',
                        width:140,
                        align:'left',
                        tooltip: true
                    },
                    {
                        title:'描述',
                        key:'description',
                        width:238,
                        align:'left',
                        tooltip: true
                    },
                    {
                        title:'创建时间',
                        key:'created',
                        width:170,
                        align:'left',
                    },
                    {
                        title:'操作',
                        key:'action',
                        align:'left',
                        width:120,
                        render:(h,params)=>{
                            let text = ''
                            if(params.row.tempUserFlag){
                                text = '已用'
                            }else {
                                text = '使用'
                            }
                            return h('a',{
                                style: {
                                    'display': 'flex',
                                    'justify-content': 'flex-start',
                                    'align-items': 'center',
                                    color:params.row.tempUserFlag?'#2f70ff':'grey'
                                },
                            },[
                                h('div', {
                                    on: {
                                        'click': ()=>{
                                            this.chooseTemp(params)
                                        },
                                    },
                                    style:{
                                        'margin-left':'15px',
                                    }
                                }, [
                                    h('img', {
                                        attrs: {
                                            src: params.row.tempUserFlag?require('../../assets/globalIcon/choosed.png'):require('../../assets/globalIcon/add.png'),
                                        },
                                        style: {
                                            cursor: 'pointer',
                                            'margin-right':'5px',
                                            'vertical-align': 'middle',
                                            width:'16px',
                                            height:'16px',
                                            display:'inline-block',
                                        },
                                    }),
                                    h('span',{
                                        style: {
                                            cursor: 'pointer',
                                        },
                                    },text)
                                ])
                            ])
                        }
                    },
                ],
                submitProjectLoading: false,
                createProModal:false,
                createdProjectRuleValidate:{
                    name:[
                        { required: true, max: 40,message: '名称长度为1—40个字符', trigger: 'change' },
                        { validator: validateName, trigger: 'change' }
                    ],
                    description:[
                        { max: 200, message: '描述文字不能超过200个字符', trigger: 'change' },
                    ]
                },
                current: {},
                tabName: 'environment',
                modalTitle: '',
                createdProjectForm: {
                    name: '',
                    description: '',
                    prjTmplId: '',
                    eventId: this.$route.query.id
                },
                querys: {
                    pageIndex: 1,
                    pageSize: 10,
                    eventId: this.$route.query.id,
                    name: '',
                    type: '',
                },
                tableObj: {
                    total: 0,
                    list: [],
                    columns: [
                        {
                            title:'',
                            key: 'name',
                            placement:'top-left',
                            width: 230,
                            tooltip: true
                        },
                        {
                            title: '文件名称',
                            width: 180,
                            key: 'fileName',
                            tooltip: true
                        },
                        {
                            title: '上传时间',
                            width: 170,
                            key: 'createTime',
                            tooltip: true
                        },
                        {
                            title: '描述',
                            width: 300,
                            key: 'description',
                            tooltip: true
                        },
                        {
                            title:'操作',
                            action:true,
                            key: 'fileId',
                            width: 300,
                            placement:'top-right',
                            render:(h,params) => {
                                return h('div',[
                                    h('Button',{
                                        props:{
                                            type:'primary',
                                            size:'small'
                                        },
                                        style:{
                                            marginRight:'5px'
                                        },
                                        on:{
                                            click:()=>{
                                                this.download(params.row.fileId)
                                            }
                                        }
                                    }, '下载'),
                                    h('Button',{
                                        props:{
                                            type:'primary',
                                            size:'small'
                                        },
                                        style:{
                                            marginRight:'5px'
                                        },
                                        on:{
                                            click:()=>{
                                                window.openTrain(`/api/minio/filePreview?id=${params.row.fileId}`);
                                            }
                                        }
                                    },"预览"),
                                    h('Button',{
                                        props:{
                                            type:'primary',
                                            size:'small'
                                        },
                                        style:{
                                            marginRight:'5px'
                                        },
                                        on:{
                                            click:()=>{
                                                this.showModalBtn(params.row)
                                            }
                                        }
                                    },"修改"),
                                    h('Poptip',{
                                        props: {
                                            confirm: true,
                                            transfer:true,
                                            title: "确定要删除吗?",
                                        },
                                        on: {
                                                "on-ok": () => {
                                                    this.deleteEventDocument(params.row.id)
                                                },
                                                "on-cancel": () => {},
                                            },
                                        },
                                        [
                                            h('Button',{
                                                props:{
                                                    type:'error',
                                                    size:'small'
                                                },
                                                style:{
                                                    marginRight:'5px'
                                                },
                                                on:{
                                                    click:()=>{
                                                    }
                                                }
                                            },"删除")
                                        ]
                                    )
                                ])
                            }
                        }
                    ]
                },
                uploadFileModal: false,
                loading: false,
                speed: 0,
                loaded: 0,
                fileSize: 0,
                progress: 0,
                formItem: {
                    visibility: 'share',
                    file: null,
                    bucket: 'docs',
                    description: '',
                    fileType: '',
                    name: '',
                    type: 1,
                    isUpload: 0
                },
                formItemRule:{
                    file: [
                        { required: true, validator: validateUpload, trigger: 'change' }
                    ],
                    name: [
                        { required: true, max: 32,message: '名称长度为1—32个字符', trigger: 'change' },
                        { validator: validateName, trigger: 'change' }
                    ],
                    type: [
                        { required: true, type: 'number', message: '不能为空', trigger: 'change' }
                    ],
                    fileId: [
                        { required: true, message: '不能为空', trigger: 'change' }
                    ]
                },
                upLoadUrl: `${this.baseURL}/minio/upload/part`,
                onlyFileName: '',
                updataLoading: false,
                addDeviceModel: false,
                templateList: [],
                templatePage: 1,
                templatePageSize: 14,
                searchTemplateName: '',
                templateVisibility: '',
                proTemLoading: false,
                templateTotal: 0,
                setTemplateImgSrc: '',
                bigModal: false,
                eventId:'',
            }
        },
        computed: {
        },
        filters: {
        },
        
        methods: {
            creatadndeploy(){
                this.creatLoading=true
                this.eventId=this.$route.query.id
                creatBlankPro(this.prjTmplId, {
                    description: "",
                    name: this.$route.query.name,
                    quotaTypeId: "2"
                },'complete').then(({ data = {} }) => {
                    let { code, message,attribute } = data
                    if (code === 2) {
                        this.projectId=attribute.result.id
                        
                        this.$Message.success('创建工程成功并开始部署，可在工程列表中查看创建的工程')
                         this.creatLoading=false
                        // this.$router.push({
                        //     name: 'homer'
                        // })
                        // console.log(this.projectId,'this.projectIdthis.projectId');
                        this.BindProject()
                    } else {
                        this.$Message.warning(message)
                        this.creatLoading=false
                    }
                }).catch(() => {
                    this.$Message.error('创建工程异常')
                })
            },
            BindProject(){
                eventBindProject(this.eventId,this.projectId).then(res=>{
                    if(res.code==1){
                        // this.$Message.success('事件与工程已绑定')
                        this.deploy()
                    } else{
                        this.$Message.warning(res.message)
                    }
                }).catch((err) => {
                    console.log(err);
                })
            },
            getProjectDetail() {
                let projectId = this.$route.query.projectId||this.projectId
                if (!projectId) {
                    this.deployLoading = false
                    this.destroyLoading = false
                    // 清空数据，控制页面内容的隐藏
                    this.deployStatus = 0
                    this.generateImageList = []
                    return
                }
                console.log(123123123);
                getstatusbyprjid(projectId).then(data => {
                    let { code, attribute, message } = data
                    if (code !== 1) {
                        this.$Message.warning(message)
                        this.deployLoading = false
                        this.destroyLoading = false
                        return
                    }
                    let project = attribute.project
                    if (project.errorMessage) {
                        this.$Message.warning(project.errorMessage)
                        clearTimeout(this.timeOut)
                        return
                    }
                    this.deployStatus = project.status
                    this.deployId = project.deployId
                    if (![0, 3, 6, 10].includes(project.status)) { // 非‘未部署’、‘部署成功’、‘部署失败’、‘未绑定工程’状态，需要查询部署进度
                        this.getDeployProgress()
                    } else {
                        clearTimeout(this.timeOut)
                    }
                    // 暂不提供销毁倒计时功能
                    // if (project.status === 3) { // 部署成功，获取工程销毁时间
                    //     this.getTime()
                    // }
                }).catch(() => {
                    this.$Message.error('获取工程详情异常')
                })
            },
            getProjectDeployDetail(id, isdeploy) {
                getstatusbyprjid(id).then(data => {
                    let { code, attribute, message } = data
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    let project = attribute.project
                    if (project.errorMessage) {
                        this.$Message.warning(project.errorMessage)
                        return
                    }
                    if (project.checkOuts && project.checkOuts.length) {
                        project.checkOuts.forEach(item => {
                            let name = []
                            if (item.data) {
                                item.data.forEach(subItem => {
                                    name.push(subItem.name)
                                })
                            }
                            if (name.length) {
                                this.$Message.warning(`${name.join(', ')}${item.message}`)
                            }
                        })
                        return
                    }
                    this.deployStatus = project.status
                    if (project.status === 15) {
                        setTimeout(() => {
                            this.getProjectDeployDetail(id, isdeploy)
                        }, 3000)
                    } else {
                        isdeploy ? this.deploySucceed = true : this.destroySucceed = true
                    }
                })
            },
            // 获取部署进度
             getDeployProgress() {
                if (!this.deployId) {
                    return
                }
                getDeployProgress(this.deployId).then(res => {
                    let { data } = res
                    let { code, message } = data
                    data = data.data
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.deployProcess = data.process
                    if (data.deployStatus === 1) { // 还在部署中，持续获取部署进度
                        this.progresStatus = 'active'
                        this.timeOut = setTimeout(() => {
                            this.getDeployProgress()
                        }, 5000)
                    } else if (data.deployStatus === -1) { // 部署失败
                        this.progresStatus = 'active'
                        this.getProjectDetail()
                        this.$refs.environmanage.getVmListManage(this.$route.query.projectId||this.projectId)
                    } else if (data.deployStatus === 0) { // 部署成功
                        this.progresStatus = ''
                        this.getProjectDetail()
                        this.deployLoading = false
                        this.$Message.success('部署成功')
                        console.log(222222222222222222);
                         this.$refs.environmanage.getVmListManage(this.$route.query.projectId||this.projectId)
                    }
                }).catch(() => {
                    this.$Message.error('获取部署进度异常')
                })
            },
            // 部署环境
            async deploy() {
               
                this.$nextTick(() => {
                    let params = {
                        pageIndex: 1,
                        pageSize: 10,
                        id: this.$route.query.projectId||this.projectId
                    }
                    this.deploySucceed = false
                    this.destroyLoading = false // 每次部署环境，都将销毁按钮的状态重置
                    this.deployLoading = true
                    getProjects(params).then(({ code, message, data = {} }) => {
                        if (code !== 1) {
                            this.$Message.warning(message)
                            return
                        }
                        let items = data.items || []
                        if (items[0].status === 17) {
                            this.$Message.warning(`工程导入失败：${items[0].errorMessage}`)
                            return
                        }
                        if (items[0].status === 4) {
                            this.$Message.warning(`工程正在删除中，禁止重新部署`)
                            return
                        }
                        // 部署前清空部署进度
                        this.progresStatus = 'active'
                        this.deployProcess = 0
                        deployProject(this.$route.query.projectId||this.projectId).then(({ data = {} }) => {
                            let { code, message } = data
                            if (code === 1) { // 部署成功，获取部署状态
                                this.getProjectDetail(this.$route.query.projectId||this.projectId)
                                console.log(1111111111111);
                                this.$refs.environmanage.getVmListManage(this.$route.query.projectId||this.projectId)
                            } else if (code === 3) { // 校验中，持续获取部署状态
                                this.getProjectDeployDetail(this.$route.query.projectId||this.projectId, true)
                            } else {
                                this.$Message.warning(message)
                                this.deployLoading = false
                            }
                        }).catch(() => {
                            this.$Message.error('部署异常')
                        })
                    }).catch(() => {
                        this.$Message.error('查询工程状态异常，无法部署')
                    })
                })
            },
            // 销毁环境
            destroy() {
                // 销毁前同样需要清空部署进度
                this.progresStatus = 'active'
                this.deployProcess = 0
                this.destroyLoading = true
                clearProject(this.$route.query.projectId).then(({ code, message }) => {
                    if ([1].includes(code)) { // 销毁成功，校验中，均获取部署状态
                        this.getProjectDetail(this.$route.query.projectId)
                    } else if ([3].includes(code)) {
                        this.getProjectDeployDetail(this.$route.query.projectId, false)
                    } else {
                        this.$Message.warning(message)
                        this.destroyLoading = false
                    }
                }).catch(() => {
                    this.$Message.error('销毁异常')
                })
            },
             modalChange(status) {
                if(!status) {
                    document.getElementById("learnVideo").pause();
                    if(document.pictureInPictureElement) {
                        document.exitPictureInPicture();
                    }
                } else {
                    //          		document.getElementById("learnVideo").play();
                }
            },
            playVideo(item) {
                console.log(item)
                this.videoModal = true;
                if(item.path.split('.').pop() == 'flv'){ //flv视频使用插件播放
                    this.isFlv = true;
                    setTimeout(() => {
                        var videoObject = {
                            container: '.video', //“#”代表容器的ID，“.”或“”代表容器的class
                            plug:'flv.js',//设置使用flv插件
                            video: '/Learn/' + item.path//视频地址
                        };
                        new ckplayer(videoObject);//初始化播放器
                    })
                }else{
                    this.isFlv = false;
                    this.videoName = item.fileName
                    this.curVideoPath = '/Learn/' + item.path;
                }
            },
            addRecord(){
                let paramas={
                    eventId:this.$route.query.id,
                    type:3,
                    isUpload:1,
                    path:this.videoPath,
                    fileName:this.recorderForm.originalName,
                    name:this.recorderForm.originalName
                }
                addEventTool(paramas).then(res=>{
                    console.log(res,123);
                    if(res.code==1){
                        this.$Message.success(res.message)
                        this.refreshList();
                    }else{
                        this.$Message.warning(res.message)
                    }
                })

            },
            startRecording() {
                this.captureScreen(screen=>{
                    // this.video.srcObject = screen;
                    this.recorder = RecordRTC(screen, {
                        type: 'video'
                    });
                    this.recorder.startRecording();
                    // release screen on stopRecording
                    this.recorder.screen = screen;
                    this.videoStart = true;
                });
            },
             stopRecordingCallback() {
                // this.video.src = this.video.srcObject = null;
                // this.video.src = URL.createObjectURL(this.recorder.getBlob());
                // 如果需要下载录屏文件可加上下面代码
                let url=URL.createObjectURL(this.recorder.getBlob())
                const a = document.createElement("a");
                document.body.appendChild(a);
                a.style.display = "none";
                a.href = url;
                a.download = this.current.name+new Date().getTime() + ".mp4";
                a.click();
                window.URL.revokeObjectURL(url);
				//上传视频
				let that = this;
				let file = new File(
					[this.recorder.getBlob()],
					this.current.name + new Date().getTime() + ".mp4",
					{
						type: "video/mp4",
					}
				);
				console.log('file', file)
				let formData = new window.FormData()
				formData.append('file',file);
				this.axios({
                            method:'post',
                            url:`${that.upLoadUrl}?visibility=company&bucket=videos&type=videos`,
                            data:formData,
                            headers:{
                                'Content-type':'multipart/form-data',
                            },
                            timeout:0,
							onUploadProgress: progressEvent => {
                            	// this.$Message.info('正在上传录屏')
                            }
                        }).then(res=>{
							if(res.data.code==1){
								// this.$Message.success('上传录屏成功')
								this.recorderForm=res.data.info
								this.videoPath=res.data.data
								// console.log(this.recorderForm,1111111111111111);
								this.addRecord()
							} else{
								this.$Message.warning(res.data.message)
							}
						}).catch(err=>{
                                console.log(err)
                        })
				this.recorder.screen.stop();
                this.recorder.destroy();
                this.recorder = null;
                this.videoStart = false;
            },
            stopRecording() {
                this.recorder.stopRecording(this.stopRecordingCallback);
            },
            invokeGetDisplayMedia(success, error) {
                let displaymediastreamconstraints = {
                    video: {
                        displaySurface: 'monitor', // monitor, window, application, browser
                        logicalSurface: true,
                        cursor: 'always' // never, always, motion
                    }
                };
                // above constraints are NOT supported YET
                // that's why overridnig them
                displaymediastreamconstraints = {
                    video: true
                };
                if (navigator.mediaDevices.getDisplayMedia) {
                    navigator.mediaDevices.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
                }
                else {
                    navigator.getDisplayMedia(displaymediastreamconstraints).then(success).catch(error);
                }
            },
            captureScreen(callback) {
                this.invokeGetDisplayMedia((screen) => {
                    this.addStreamStopListener(screen, () => {
                       //
                    });
                    callback(screen);
                }, function (error) {
                    console.error(error);
                    alert('已取消视频录制\n' + error);
                });
            },
            addStreamStopListener(stream, callback) {
                stream.addEventListener('ended', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.addEventListener('inactive', function () {
                    callback();
                    callback = function () { };
                }, false);
                stream.getTracks().forEach((track)=> {
                    track.addEventListener('ended', () =>{
                        this.stopRecording()
                        callback();
                        callback = function () { };
                    }, false);
                    track.addEventListener('inactive', function () {
                        callback();
                        callback = function () { };
                    }, false);
                });
            },
            getDictscreenRecording(){
				let params={
                        name:'screenRecording'
                    }
				getDictInfoByName(params).then(res=>{
					console.log(res);
					if(res.code==1){
						this.screenRecording=res.attribute.data.value
					}
					else{
						this.screenRecording=0
						this.$Message.warning('查询屏幕录制配置失败')
					};
				})
			},
            showDocumentDetail(item) {
                window.openTrain(`/api/minio/filePreview?id=${item.fileId}`)
            },
            // 上传文件
            formBtn(name){
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        this.formItem.eventId = this.$route.query.id
                        if (!this.formItem.id) { // 没有主键，创建数据
                            let fnName = this.isTool ? addEventTool : addEventDocument
                            fnName(this.formItem).then(({ code, message }) => {
                                if (code !== 1) {
                                    this.$Message.warning(message)
                                    return
                                }
                                this.uploadFileModal = false
                                this.$Message.info(this.isTool ? '绑定工具成功' : '上传描述文档成功')
                                this.refreshList();
                            })
                        } else { // 修改原有数据
                            let fnName = this.isTool ? updateEventTool : updateEventDocument
                            fnName(this.formItem).then(({ code, message }) => {
                                if (code !== 1) {
                                    this.$Message.warning(message)
                                    return
                                }
                                this.uploadFileModal = false
                                this.$Message.info(this.isTool ? '修改工具成功' : '修改描述文档成功')
                                this.refreshList();
                            })
                        }
                    }
                })
            },
            // 清空模态框loading状态
            changeModalLoading() {
                this.updataLoading = false;
                this.$nextTick(() => {
                    this.updataLoading = true;
                });
            },
            // 上传文件的内容判断
            handleUploadIcon(file){
                this.speed = 0;
                this.loaded = 0;
                this.progress = 0;
                this.isUpdataing = true
                this.loading = true
                this.onlyFileName = file.name + '_' + new Date().getTime();
                if (file) {
                    if (file.size > 1024 * 1024) {
                        this.fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'
                    } else {
                        this.fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'
                    }
                    //验证名称
                    if(file.name){
                        let name = this.getFileName(file.name);
                        let reg = new RegExp("^[\u4E00-\u9FA5a-zA-Z0-9_ -]*$");
                        if (!reg.test(name) || name.length > 64) {
                            this.$Message.error({
                                content:'文件名称只能包含中文、英文、数字、下划线、-，名称长度为1-64个字符',
                                duration:3,
                        })
                        this.loading = false
                        return false;
                        }
                    }
                    let exceededNum=file.name.lastIndexOf(".");
                    let exceededStr=file.name.substring(exceededNum+1,file.name.length).trim().toLowerCase();
                    if (!this.isTool) {
                        if(exceededStr && this.docsArr.includes(exceededStr)){
                            this.formItem.file = file;
                            this.formItem.bucket = 'docs';
                            this.formItem.fileType = 'docs';
                        }else{
                            this.uploadFile = null
                            this.formItem.file = null
                            this.formItem.bucket = '';
                            this.formItem.fileType = '';
                            this.$Message.error({
                                content:'不支持该类型文件',
                                duration:3,
                            })
                            this.loading = false
                            return false
                        }
                    } else { // 工具只允许上传视频、以及其他类型，或者无后缀的类型
                        if (this.formItem.type === 3 && this.videoArr.includes(exceededStr)) { // 类型为视频时，只允许上传视频类型的文件
                            this.formItem.file = file;
                            this.formItem.bucket = 'videos';
                            this.formItem.fileType = 'videos';
                        } else if (this.formItem.type == 1 && this.othersArr.includes(exceededStr)) { // 非视频类型，只允许上传其他类型文件
                            this.formItem.file = file;
                            this.formItem.bucket = 'files';
                            this.formItem.fileType = 'files';
                        } else if (this.formItem.type == 2 && this.scriptArr.includes(exceededStr)) { // 非视频类型，只允许上传其他类型文件
                            this.formItem.file = file;
                            this.formItem.bucket = 'files';
                            this.formItem.fileType = 'files';
                        }else {
                            this.uploadFile = null
                            this.formItem.file = null
                            this.formItem.bucket = '';
                            this.formItem.fileType = '';
                            this.$Message.error({
                                content:'不支持该类型文件',
                                duration:3,
                            })
                            this.loading = false
                            return false
                        }
                    }
                     this.upload(file)
                }
                
                // let _this = this
                // let formData = new window.FormData()
                // formData.append('file', file);
                // this.axios({
                //     method:'post',
                //     url:`${this.upLoadUrl}?bucket=${this.formItem.bucket}&type=${this.formItem.fileType}`,
                //     headers:{
                //         'Content-type': 'multipart/form-data',
                //     },
                //     data:formData,
                //     onUploadProgress: progressEvent => {
                //         var complete = Math.floor(progressEvent.loaded / progressEvent.total * 100)
                //         _this.progress = complete
                //         function getspeed () {
                //             var aaspeed = Number(progressEvent.loaded - _this.loaded) || 0
                //             _this.loaded = progressEvent.loaded
                //             _this.progress = Math.floor(progressEvent.loaded / progressEvent.total * 100)
                //             if(aaspeed > 1024 * 1024) {
                //                 _this.speed = (Math.round(aaspeed * 100 / (1024 * 1024)) / 100).toString() + 'MB/s'
                //             } else {
                //                 _this.speed = (Math.round(aaspeed * 100 / 1024) / 100).toString() + 'KB/s'
                //             }
                //         }
                //         setInterval(getspeed(), 1000)
                //     }
                // }).then(({ data = {} }) => {
                //     if(data.code == 1) {
                //         let file = data;
                //         let src = file.data;
                //         this.showTip = false;
                //         this.filename = file.info.originalName;
                //         this.formItem.fileName = file.info.originalName;
                //         this.formItem.path = src;
                //         this.formItem.fileId = file.info.id;
                //     } else {
                //         this.$Message.warning(data.message);
                //         this.formItem.file=null
                //     }
                // }).catch((err) => {
                //     console.log(err,'errerrerrerrerr');
                //      this.uploadFileModal=false
                // }).finally(() => {
                //     this.$refs.formItem.validateField('file')
                //     this.loading = false
                // })
                return false
            },
            upload (file) {
                if (file.size <= 0) {
                    this.$Message.error({
                    content: '无效文件!',
                    duration: 3
                    })
                    // this.progressflag = false
                    return
                }
                console.log(file.name,111111111111);
                this.filedArr = []
                var clientId = this.generateClientId() //id
                var fileName = file.name;
                var size = file.size
                // if (file.size < 1024 * 1024 * 600) {
                    // var shardSize = file.size; //如果上传的文件小于600M直接以当前文件为一个分片
                // } else {
                var shardSize = 1024 * 1024 * 50; //如果上传的文件大于600M就以50M为一个分片
                // }
                var chunks = Math.ceil(size / shardSize); //总片数
                for (var i = 0; i < chunks; ++i) {
                    var start = i * shardSize; //计算每一片的起始位置
                    var end = Math.min(size, start + shardSize)  //计算每一片的结束位置
                    var partFile = file.slice(start, end)
                    this.filedArr.push(partFile)
                };
                //上传分片请求函数
                const partUpload = async (clientId, filedArr, chunks, chunkId) => {
                    try {
                    let _this = this
                    let partFile = filedArr[chunkId]
                    var form = new FormData();
                    form.append('clientId', clientId); //客户端id
                    form.append('file', partFile); // slice方法 用于切出文件的一部分
                    // form.append('fileName', fileName); // 文件名
                    // form.append('chunks', chunks); // 总片数
                    form.append('chunkId', chunkId); //当前是第几片
                    const res = await _this.axios({
                        method: 'post',
                        url: `${this.baseURL}/minio/upload/part`,
                        data: form,
                        headers: {
                        'Content-type': 'multipart/form-data',
                        },
                        timeout:0,
                        onUploadProgress: progressEvent => {
                        if (file.size > 1024 * 1024) {
                            this.fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'
                        } else {
                            this.fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'
                        }
                        this.fileName = file.name
                        // if (file.size < 1024 * 1024 * 600) {
                        //   var complete = Math.floor(progressEvent.loaded / progressEvent.total * 100)
                        //   _this.progress = complete
                        // }
                        var newTime = +new Date()
                        var DTime = (newTime - this.oldTime) / 1000
                        this.oldTime = newTime

                        var aaspeed = Number(progressEvent.loaded - _this.loaded) / (1024 * 1024)
                        _this.loaded = progressEvent.loaded
                        if (aaspeed / DTime < 1) {
                            _this.speed = (Math.round(aaspeed / DTime * 1024 * 100) / 100).toString() + 'kB/s'
                        } else {
                            _this.speed = (Math.round(aaspeed / DTime * 100) / 100).toString() + 'MB/s'
                        }
                        },
                    });
                    if (res.data.code == 1) {
                        chunkId += 1
                        if (chunkId < this.filedArr.length) {
                        _this.loaded = 0
                        this.flag += 1
                        var complete = Math.ceil(this.flag / chunks * 100)   //当前进度所占总进度的百分比
                        this.progress = complete
                        partUpload(clientId, this.filedArr, chunks, chunkId)
                        } else {
                        this.flag += 1
                        var complete = Math.ceil(this.flag / chunks * 100)   //当前进度所占总进度的百分比
                        this.progress = complete
                        if (this.progress == 100) {
                            this.setDisabled = false //打开提交和选择文件按钮权限
                            _this.loaded = 0
                            this.speed = 0//置空速度
                            this.flag = 0
                            this.filedArr = []
                            this.flag = 0
                            this.$Message.success({
                            content: '文件上传成功!请稍后。',
                            duration: 3

                            })
                            this.mergeFile(clientId,fileName) //不再调用合并分片接口，创建镜像的时候tempId为随机生成的clientId
                            // this.imageFormData.tempId = clientId
                        }
                        }
                    }
                    } catch (error) {
                        this.$Message.error('上传文件出错')
                        console.log(error)
                    }

                }
                partUpload(clientId, this.filedArr, chunks, 0)
                },
            mergeFile(clientId,fileName){
                console.log(fileName,111111);
               this.axios({
                    method:'post',
                    url:`${this.baseURL}/minio/upload/merge/file/?bucket=${this.formItem.bucket}&type=${this.formItem.fileType}&clientId=${clientId}&sourceName=${fileName}`,
                    headers:{
                        'Content-type': 'multipart/form-data'
                    },
                    timeout:0,
                }).then(({ data = {} }) => {
                    if(data.code == 1) {
                        let file = data;
                        let src = file.data;
                        this.showTip = false;
                        this.filename = file.info.originalName;
                        this.formItem.fileName = file.info.originalName;
                        this.formItem.path = src;
                        this.formItem.fileId = file.info.id;
                        this.$Message.success('合并文件成功')
                    } else {
                        this.$Message.warning(data.message);
                        this.formItem.file=null
                    }
                    this.loading = false
                    console.log(data,11111111111);
                }).catch((err) => {
                      this.$Message.error('合并文件出错')
                    console.log(err,'errerrerrerrerr')
                }).finally(() => {
                    this.$refs.formItem.validateField('file')
                    this.loading = false
                })
            },
            generateClientId () {
                var counter = 0;
                var clientId = (+new Date()).toString(32),
                    i = 0;
                for (; i < 5; i++) {
                    clientId += Math.floor(Math.random() * 65535).toString(32);
                }
                return clientId + (counter++).toString(32);
            },
            // 获取文件名称
            getFileName (name) {
                return name.substring(0, name.lastIndexOf("."))
            },
            // 打开上传文件的模态框（绑定工具和上传文档共用一个模态框）
            showModalBtn(info, isTool,isVideo){
                
                this.isTool = !!isTool
                this.uploadFileModal = true
                this.loading = false
                if (info) {
                    // this.modalTitle= isTool ? '修改工具' : "修改描述文档"
                     this.modalTitle= isVideo ? '修改视频' : (isTool ? '修改工具' : "修改描述文档")
                    this.formItem = Object.assign({}, info)
                    this.formItem.visibility = 'share'
                    this.$set(this.formItem, 'file', {})
                    this.formItem.bucket = isTool ? '' : 'docs',
                    this.formItem.fileType = isTool ? '' : 'docs'
                } else {
                    // this.modalTitle= isTool ? '绑定工具' : "上传描述文档"
                     this.modalTitle= isVideo ? '绑定视频' : (isTool ? '绑定工具' : "上传描述文档")
                    this.formItem = {
                        visibility: 'share',
                        file: null,
                        bucket: isTool ? '' : 'docs',
                        description: info ? info.description : '',
                        fileType: isTool ? '' : 'docs',
                        type: 1,
                        name: '',
                        isUpload: 0
                    }
                }
                if(this.tabName=='video'){
                    this.formItem.type=3
                }
                if(this.tabName=='video'){
                    console.log(123);
                    this.formItem.isUpload=1
                }
                this.speed = 0
                this.loaded = 0
                this.fileSize = 0
                this.progress = 0
            },
            // 重置搜索条件
            refreshList() {
                this.querys = {
                    eventId: this.$route.query.id,
                    pageSize: 10,
                    name: '',
                    type: '',
                    pageIndex: 1,
                }
                this.changePage(1)
            },
            // 换当前页
            changePage(val) {
                this.querys.pageIndex = val
                switch(this.tabName) {
                    case 'state': {
                        this.getEventDocumentlist(true)
                        this.getEventProjectlist(true)
                        this.getEventToollist(true)
                        break
                    }
                    case 'document':
                        this.tableObj.columns = [
                            {
                                title:'名称',
                                key: 'name',
                                placement:'top-left',
                                minWidth: 100,
                                tooltip: true
                            },
                            {
                                title: '文件名称',
                                minWidth: 100,
                                key: 'fileName',
                                tooltip: true
                            },
                            {
                                title: '上传时间',
                                minWidth: 120,
                                key: 'createTime',
                                tooltip: true
                            },
                            {
                                title: '描述',
                                minWidth: 150,
                                key: 'description',
                                tooltip: true
                            },
                            {
                                title:'操作',
                                action:true,
                                key: 'fileId',
                                minWidth:150,
                                placement:'top-right',
                                render:(h,params) => {
                                    return h('div',[
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                     this.download(params.row.fileId)
                                                }
                                            }
                                        }, '下载'),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    window.openTrain(`/api/minio/filePreview?id=${params.row.fileId}`);
                                                }
                                            }
                                        },"预览"),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    this.showModalBtn(params.row)
                                                }
                                            }
                                        },"修改"),
                                        h('Poptip',{
                                            props: {
                                                confirm: true,
                                                transfer:true,
                                                title: "确定要删除吗?",
                                            },
                                            on: {
                                                    "on-ok": () => {
                                                        this.deleteEventDocument(params.row.id)
                                                    },
                                                    "on-cancel": () => {},
                                                },
                                            },
                                            [
                                                h('Button',{
                                                    props:{
                                                        type:'error',
                                                        size:'small'
                                                    },
                                                    style:{
                                                        marginRight:'5px'
                                                    },
                                                    on:{
                                                        click:()=>{
                                                        }
                                                    }
                                                },"删除")
                                            ]
                                        )
                                    ])
                                }
                            }
                        ]
                        this.getEventDocumentlist()
                        break
                    case 'topo':
                        this.tableObj.columns = [
                            {
                                title:'名称',
                                key: 'name',
                                placement:'top-left',
                                minWidth: 120,
                                tooltip: true
                            },
                            {
                                title: '工程模板名称',
                                minWidth: 120,
                                key: 'prjTmplName',
                                tooltip: true
                            },
                            {
                                title: '绑定时间',
                                minWidth: 170,
                                key: 'createTime',
                                tooltip: true
                            },
                            {
                                title: '描述',
                                minWidth: 150,
                                key: 'description',
                                tooltip: true
                            },
                            {
                                title:'操作',
                                action:true,
                                key: 'fileId',
                                minWidth: 150,
                                placement:'top-right',
                                render:(h,params) => {
                                    return h('div',[
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    this.showBigImg(params.row.picUrl)
                                                }
                                            }
                                        },"预览工程拓扑"),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    this.createProModal = true
                                                    this.createdProjectForm = Object.assign({}, params.row)
                                                }
                                            }
                                        },"修改"),
                                        h('Poptip',{
                                            props: {
                                                confirm: true,
                                                transfer:true,
                                                title: "确定要删除吗?",
                                            },
                                            on: {
                                                    "on-ok": () => {
                                                        this.deleteEventProject(params.row.id)
                                                    },
                                                    "on-cancel": () => {},
                                                },
                                            },
                                            [
                                                h('Button',{
                                                    props:{
                                                        type:'error',
                                                        size:'small'
                                                    },
                                                    style:{
                                                        marginRight:'5px'
                                                    },
                                                    on:{
                                                        click:()=>{
                                                        }
                                                    }
                                                },"删除")
                                            ]
                                        )
                                    ])
                                }
                            }
                        ]
                        this.getEventProjectlist()
                        break
                    case 'tool':
                        this.tableObj.columns = [
                            {
                                title:'名称',
                                key: 'name',
                                placement:'top-left',
                                minWidth: 100,
                                tooltip: true
                            },
                            {
                                title: '文件名称',
                                minWidth: 180,
                                key: 'fileName',
                                tooltip: true
                            },
                            {
                                title: '类型',
                                minWidth: 100,
                                key: 'type',
                                render: (h,params) => {
                                    let type = params.row.type
                                    return h('span', {
                                        style: {
                                            color: type === 1 ? '#2db7f5' : type === 2 ? '#19be6b' : '#17233d'
                                        }
                                    }, type === 1 ? '工具' : type === 2 ? '脚本' : '视频')
                                }
                            },
                            {
                                title: '是否为已有工具',
                                minWidth: 120,
                                key: 'isUpload',
                                render: (h,params) => {
                                    let isUpload = params.row.isUpload
                                    return h('span', {
                                        style: {
                                            color: isUpload === 0 ? '#2db7f5' : '#ed4014'
                                        }
                                    }, isUpload === 0 ? '是' : '否')
                                }
                            },
                            {
                                title: '绑定时间',
                                minWidth: 170,
                                key: 'createTime',
                                tooltip: true
                            },
                            {
                                title: '描述',
                                minWidth: 200,
                                key: 'description',
                                tooltip: true
                            },
                            {
                                title:'操作',
                                action:true,
                                key: 'fileId',
                                minWidth:150,
                                placement:'top-right',
                                render:(h,params) => {
                                    return h('div',[
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    if (params.row.isUpload === 0 && params.row.type === 2) {
                                                        this.downLoadScript(params.row.path)
                                                    } else {
                                                         this.downloadtool(params.row.path)
                                                    }
                                                }
                                            }
                                        }, '下载'),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    this.showModalBtn(params.row, true)
                                                }
                                            }
                                        },"修改"),
                                        h('Poptip',{
                                            props: {
                                                confirm: true,
                                                transfer:true,
                                                title: "确定要删除吗?",
                                            },
                                            on: {
                                                    "on-ok": () => {
                                                        this.deleteEventTool(params.row.id)
                                                    },
                                                    "on-cancel": () => {},
                                                },
                                            },
                                            [
                                                h('Button',{
                                                    props:{
                                                        type:'error',
                                                        size:'small'
                                                    },
                                                    style:{
                                                        marginRight:'5px'
                                                    },
                                                    on:{
                                                        click:()=>{
                                                        }
                                                    }
                                                },"删除")
                                            ]
                                        )
                                    ])
                                }
                            }
                        ]

                        this.getEventToollist()
                        this.querys.typeList=[1,2]
                        break
                    case 'video':
                        this.tableObj.columns = [
                            {
                                title:'名称',
                                key: 'name',
                                placement:'top-left',
                                minWidth: 200,
                                tooltip: true
                            },
                            {
                                title: '文件名称',
                                minWidth: 180,
                                key: 'fileName',
                                tooltip: true
                            },
                            {
                                title: '类型',
                                minWidth: 100,
                                key: 'type',
                                render: (h,params) => {
                                    let type = params.row.type
                                    return h('span', {
                                        style: {
                                            color: type === 1 ? '#2db7f5' : type === 2 ? '#19be6b' : '#17233d'
                                        }
                                    }, type === 1 ? '工具' : type === 2 ? '脚本' : '视频')
                                }
                            },
                            // {
                            //     title: '是否为已有工具',
                            //     width: 50,
                            //     key: 'isUpload',
                            //     render: (h,params) => {
                            //         let isUpload = params.row.isUpload
                            //         return h('span', {
                            //             style: {
                            //                 color: isUpload === 0 ? '#2db7f5' : '#ed4014'
                            //             }
                            //         }, isUpload === 0 ? '是' : '否')
                            //     }
                            // },
                            {
                                title: '绑定时间',
                                minWidth: 170,
                                key: 'createTime',
                                tooltip: true
                            },
                            {
                                title: '描述',
                                minWidth: 150,
                                key: 'description',
                                tooltip: true
                            },
                            {
                                title:'操作',
                                action:true,
                                key: 'fileId',
                                minWidth: 150,
                                placement:'top-right',
                                render:(h,params) => {
                                    return h('div',[
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    if (params.row.isUpload === 0 && params.row.type === 2) {
                                                        this.downLoadScript(params.row.path)
                                                    } else {
                                                        this.download(params.row.fileId, params.row.isUpload === 0)
                                                    }
                                                }
                                            }
                                        }, '下载'),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                   this.playVideo(params.row);
                                                }
                                            }
                                        },"查看"),
                                        h('Button',{
                                            props:{
                                                type:'primary',
                                                size:'small'
                                            },
                                            style:{
                                                marginRight:'5px'
                                            },
                                            on:{
                                                click:()=>{
                                                    this.showModalBtn(params.row, true,true)
                                                }
                                            }
                                        },"修改"),
                                        h('Poptip',{
                                            props: {
                                                confirm: true,
                                                transfer:true,
                                                title: "确定要删除吗?",
                                            },
                                            on: {
                                                    "on-ok": () => {
                                                        this.deleteEventTool(params.row.id)
                                                    },
                                                    "on-cancel": () => {},
                                                },
                                            },
                                            [
                                                h('Button',{
                                                    props:{
                                                        type:'error',
                                                        size:'small'
                                                    },
                                                    style:{
                                                        marginRight:'5px'
                                                    },
                                                    on:{
                                                        click:()=>{
                                                        }
                                                    }
                                                },"删除")
                                            ]
                                        )
                                    ])
                                }
                            }
                        ]
                        this.querys.typeList=[3]
                        this.getEventToollist(false)
                        break
                        
                }
            },
            // 大图预览
            showBigImg(src){
                this.setTemplateImgSrc = '/files'+src
                this.bigModal = true
            },
            deleteEventProject(id) {
                deleteEventProject(id).then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.getEventProjectlist()
                    this.$Message.info('删除成功')
                }).catch(() => {
                    this.$Message.error('删除工程模板异常')
                })
            },
            createdProSubmit(name){
                this.$refs[name].validate((valid) =>{
                    if(valid){
                        this.submitProjectLoading = true
                        if (!this.createdProjectForm.prjTmplId) {
                            this.$Message.warning('请选择工程模板')
                            this.submitProjectLoading = false
                            return
                        }
                        if (this.createdProjectForm.id) {
                            updateEventProject(this.createdProjectForm).then(({ code, message }) =>{
                                if (code !== 1) {
                                    this.$Message.warning(message)
                                    return
                                }
                                this.$Message.info('修改成功')
                                this.refreshList()
                                this.createProModal = false
                                this.submitProjectLoading = false
                            }).catch(err=>{
                                this.submitProjectLoading = false
                            })
                        } else {
                            addEventProject(this.createdProjectForm).then(({ code, message }) =>{
                                if (code !== 1) {
                                    this.$Message.warning(message)
                                    return
                                }
                                this.$Message.info('绑定工程模板成功')
                                this.refreshList()
                                this.createProModal = false
                                this.submitProjectLoading = false
                            }).catch(err=>{
                                this.submitProjectLoading = false
                            })
                        }
                    }else {
                        this.$Message.error('请完善信息！');
                    }
                })
            },
            chooseTemp(params){
                if(!params.row.tempUserFlag){
                    let _index = params.row._index
                    for(let i=0;i<this.templateList.length;i++){
                        this.templateList[i].tempUserFlag = false
                    }
                    this.$set(this.templateList[_index],'tempUserFlag',true)
                    this.createdProjectForm.prjTmplId =  params.row.id
                    this.createdProjectForm.prjTmplName = params.row.name
                    this.createdProjectForm.picUrl = params.row.picUrl
                }
            },
            refreshTem(){
                this.searchTemplateName = ''
                this.templateVisibility = ''
                this.toPlateTabs(1)
            },
            // 清除模板
            clearTemp(){
                this.createdProjectForm.prjTmplId = ''
                this.createdProjectForm.prjTmplName = ''
                this.createdProjectForm.picUrl = ''
            },
            // 选择工程模板
            toPlateTabs(val){
                if (val) {
                    this.templatePage = val
                }
                this.addDeviceModel = true
                this.templateList = []
                let query = {
                    pageIndex: this.templatePage,
                    pageSize: this.templatePageSize,
                };
                let params = {
                    name:this.searchTemplateName,
                    visibility:this.templateVisibility,
                    type:'project',
                }
                this.proTemLoading = true
                getTemplateData(params,query)
                    .then(res=>{
                        if(res.data.code === 1){
                            let pateInfo = res.data.data
                            this.templateTotal = +pateInfo.total
                            let items = pateInfo.items
                            for(let i=0;i<items.length;i++){
                                items[i].tempUserFlag = false
                                if(items[i].id === this.createdProjectForm.prjTmplId){
                                    items[i].tempUserFlag = true
                                }
                            }
                            this.templateList = items
                        }else {
                            this.templateList = []
                            this.templateTotal = 0
                        }
                        this.proTemLoading = false
                    })
                    .catch(err=>{
                        this.proTemLoading = false
                    })
            },
            // 获取事件工具列表
            getEventToollist(isSelectAll) {
                getEventToollist(this.querys).then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    let list = data.items || []
                    this.tableObj.list = list
                    this.tableObj.total = data.total || 0
                    let toolList = []
                    let videoList = []
                    let otherList = []
                    list.forEach(item => {
                        item.type === 1 ? toolList.push(item) : item.type === 2 ? otherList.push(item) : videoList.push(item)
                    })
                    this.detailObj.toolList = toolList
                    this.detailObj.videoList = videoList
                    this.detailObj.otherList = otherList
                }).catch(() => {
                    this.$Message.error('获取事件工具列表异常')
                })
            },

            // 获取事件工程模板列表
            getEventProjectlist(isSelectAll) {
                getEventProjectlist(isSelectAll ? {
                    eventId: this.$route.query.id,
                    pageSize: 2147483646,
                    pageIndex: 1
                } : this.querys).then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    let list = data.items || []
                    if(list.length>0){
                       this.prjTmplId=list[0].prjTmplId
                    }else{
                        this.prjTmplId=''
                    }
                    this.tableObj.list = list
                    this.tableObj.total = data.total || 0
                    this.detailObj.eventList = list
                }).catch(() => {
                    this.$Message.error('获取事件工程模板列表异常')
                })
            },
            conModalChange(){
                this.createProModal = false
                this.getEventProjectlist()
            },
            // 删除工具
            deleteEventTool(id) {
                deleteEventTool([id]).then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.querys.pageIndex = (this.tableObj.list.length == 1 && this.querys.pageIndex > 1) 
                            ? this.querys.pageIndex - 1 
                            : this.querys.pageIndex
                    this.getEventToollist()
                    this.$Message.info('删除成功')
                }).catch(() => {
                    this.$Message.error('删除工具异常')
                })
            },
            // 删除描述文档
            deleteEventDocument(id) {
                deleteEventDocument([id]).then(({ code, message }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    this.querys.pageIndex = (this.tableObj.list.length == 1 && this.querys.pageIndex > 1) 
                            ? this.querys.pageIndex - 1 
                            : this.querys.pageIndex
                    this.getEventDocumentlist()
                    this.$Message.info('删除成功')
                }).catch(() => {
                    this.$Message.error('删除描述文档异常')
                })
            },
            // 下载报告
            downloadtool(path){
                console.log(path,'pathpath');
                 let a = document.createElement("a");
                document.body.appendChild(a);
                a.href =  `/api/minio/download?path=${path}`;
                a.click(); //点击触发下载
            },
            download(fileId, isLocal) {
                let a = document.createElement("a");
                document.body.appendChild(a);
                if (isLocal) {
                    a.href = `/api/tools/tools/${fileId}/download`;
                } else {
                    a.href = `/api/minio/download/${fileId}`;
                }
                a.click(); //点击触发下载
            },
            downLoadScript(path) {//下载
                downloads({ path: path }).then(res => {
                    let blob = new Blob([res.data], { type: "" })
                    let link = document.createElement('a');
                    let url = URL.createObjectURL(blob);
                    link.style.display = 'none';
                    link.href = url;
                    let filename = path.substring(path.toString().indexOf("_") + 1, path.length);
                    link.download = filename;
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }).catch(err => {
                })
            },
            // 页面回退到列表页
            rollback() {
                this.$router.push({
                    name: 'sceneBank'
                })
            },
            // 获取事件详情
            getEventlist() {
                getEventlist({ id: this.$route.query.id }).then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    let list = data.items || []
                    this.current = list[0]
                    this.$store.commit('addBreadItem', { name: this.current.name });
                    if (this.current.survey !== 1) { // 未开放的事件场景，优先展示描述文档tab
                        this.getEventDocumentlist()
                    } else { // 已开放的事件场景，优先展示概况
                        this.tabName = 'state'
                    }
                }).catch(() => {
                    this.$Message.error('获取事件详情异常')
                })
            },
            // 查询时间文档
            getEventDocumentlist(isSelectAll) {
                getEventDocumentlist(isSelectAll ? {
                    eventId: this.$route.query.id,
                    pageSize: 2147483646,
                    pageIndex: 1
                } : this.querys).then(({ code, message, data = {} }) => {
                    if (code !== 1) {
                        this.$Message.warning(message)
                        return
                    }
                    let list = data.items || []
                    this.tableObj.list = list
                    this.tableObj.total = data.total || 0
                    this.detailObj.documentList = list
                }).catch(() => {
                    this.$Message.error('获取事件文档列表异常')
                })
            },
            // // 查询已有的所有工具
            // getAlreadyToollist() {
            //     getToolList({
            //         page: 1,
            //         size: 2147483646
            //     }).then(({ code, data = {} }) => {
            //         if (code === 1) {
            //             this.toolList = data.list || []
                        
            //         }
            //     })
            // },
            // 查询已有的所有工具
            getAlreadyToollist() {
                getToolList({
                    page: 1,
                    size: 2147483646
                }).then(res => {
                    console.log(res);
                    if(res.data.code==1){
                        this.toolList = res.data.data.items || []
                    }
                    // if (code === 1) {
                    //     this.toolList = data.list || []
                        
                    // }
                })
            },
            // 获取所有脚本列表
            getScriptList() {
                loadConfiguration({
                    pageIndex: 1,
                    pageSize: 2147483646
                }).then(({ code, data = {} }) => {
                    if (code === 1) {
                        this.scriptList = data.items || []
                    }
                })
            },
            // 选中工具、脚本，补全其他数据
            changeTool(val) {
                this.$set(this.formItem, 'path', val)
                let list = this.formItem.type === 1 ? this.toolList : this.scriptList
                let template = list.find(item => String(item.id) === val) // 工具的id有些是数字，需要转型为字符串来进行全等于判断
                if (template) {
                    this.formItem.fileName = template.name
                    this.formItem.path = template.path
                }
            },
            changeType(val) {
                this.$set(this.formItem, 'isUpload', val === 3 ? 1 : 0)
                this.formItem.file = null
                this.formItem.bucket = '';
                this.formItem.fileType = '';
                this.formItem.fileName = ''
                if (val === 3) { // 视频
                    this.formatStr = this.videoArr.toString()
                } else if (val === 2)  { // 脚本
                    this.formatStr = this.scriptArr.toString()
                }else   { // 工具
                    this.formatStr = this.othersArr.toString()
                }
            },
            changeIsUpload() {
                this.formItem.fileId = ''
                this.formItem.fileName = ''
                this.formItem.file = null
                if(this.formItem.type==3){
                    this.formItem.isUpload=1
                }
            },
            setStyle(){
                let height = document.body.clientHeight - 200
                this.tableHeight = height > 712 ? 712 : height
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.getEventlist()
                this.setStyle()
            })
            window.onresize = () => {
                this.setStyle()
            }
            this.getDictscreenRecording() 
            this.getProjectDetail()
            if(this.$route.query.prjTmplId){
                this.prjTmplId=this.$route.query.prjTmplId
                console.log(this.prjTmplId,'this.prjTmplIdthis.prjTmplId');
            }
            
        },
        watch: {
            deploySucceed(newValue) { // 部署成功，查询工程状态，视情况查询部署进度
                if (newValue) {
                    this.getProjectDetail()
                }
            },
            destroySucceed(newValue) { // 清空工程成功，查询工程状态
                if (newValue) {
                    this.getProjectDetail()
                }
            },
            uploadFileModal(val) {
                if (!val) {
                    this.$refs.formItem.resetFields()
                }
            },
            tabName(newVal) {
                this.tableObj.list = []
                this.tableObj.total = 0
                this.refreshList()
                console.log(11111111111111111);
                if (newVal === 'tool') {
                    this.getAlreadyToollist()
                    this.getScriptList()
                }
            },
            createProModal(val) {
                if (!val) {
                    this.$refs.createdProjectForm.resetFields()
                    this.submitProjectLoading = false
                }
            },
            isTool(val) {
                if (val) {
                    if (this.formItem.type === 3) { // 视频
                        this.formatStr = this.videoArr.toString()
                    } else  if (this.formItem.type === 2){ //脚本
                        this.formatStr = this.scriptArr.toString()
                    }else { // 工具、
                        this.formatStr = this.othersArr.toString()
                    }
                } else {
                    this.formatStr = this.docsArr.toString()
                }
            }
        },
        beforeDestroy(){
        },
    }
</script>

<style scoped>
.left-title {
    position: absolute;
    display: flex;
    width: calc(100% - 20px);
    justify-content: center;
}
.state-content {
    display: flex;
    height: 100%;
}
.state-content>.left {
    width: 60%;
    height: 100%;
    padding: 10px;
    border: 2px solid #395D80;
    position: relative;
}
.state-content>.right {
    width: 40%;
    height: 100%;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}
.state-content>.right>.sub-item {
    height: 25%;
}
.state-content>.right>.sub-item>.sub-item-content {
    margin-top: 10px;
    margin-bottom: 20px;
    height: calc(100% - 56px);
    overflow: auto;
    overflow-wrap: break-word;
}
.state-content>.right>.sub-item>.sub-item-content>.sub-item-list {
    display: flex;
    width: 100%;
    align-items: center;
}
.state-content>.right>.sub-item>.sub-item-content>.sub-item-list>div:nth-child(1) {
    width: 36px;
    text-align: right;
}
.state-content>.right>.sub-item>.sub-item-content>.sub-item-list>div:nth-child(2) {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 4px;
}
.my-btn {
    cursor: pointer;
    color: #57A3F3;
}
.scene-bank-detail {
    /* padding: 0 30px 30px; */
}
.addressIcon {
    display: inline-block;
    height: 14px;
    width: 12px;
    background: url("../../assets/exper/addressIcon.png") no-repeat center;
    background-size: 100% 100%;
    margin-bottom: -1px;
}
.class-top {
    display: flex;
    justify-content: space-between;
    padding: 0 30px;
    margin-bottom: 20px;
}
.class-title-wrap {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.class-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right:50px;
}
.class-title-all {
    font-size: 16px;
    cursor: pointer;
    color: var(--default-color-level2);
}
.class-title-line {
    background-color: #fff;
    height: 3px;
    border-radius: 1px;
    width: 50px;
    margin: 20px 0 3px 0;
}
.line-active {
    background-color: var(--default-color);;
}
.active {
    color: var(--default-color);
    font-size: 22px;
    font-weight: 600;
}
.scene-bank-detail-wrap {
    width: 100%;
    height: calc(100vh - 218px);
    min-height: 550px;
    overflow-x: hidden;
    overflow-y: auto;
    padding:20px 30px 0px;
    display: flex;
    flex-direction: column;
    float: right;
}
.scene-bank-detail /deep/ .ivu-divider {
    margin: 0;
}
.defGraphWrap {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.defGraph {
    height: 126px;
    width: 157px;
    background: url("../../assets/globalIcon/defGraph.png") no-repeat center center;
    background-size: 157px 126px;
}
.graphText {
    color: #888;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}
.uploadTypeWrap{
    color: orange;
    margin-bottom: -32px;
    top: -34px;
    left: 114px;
    position: relative;
}
/deep/ .uploadTypeWrap + .ivu-form-item-error-tip {
    top: 32px;
}
.uploadTypeWrap /deep/ .ivu-tooltip-inner{
    word-break: break-all;
    white-space: pre-wrap;
}
.project-page-drawer{
    position: relative;
}
.project-page-drawer /deep/ .ivu-drawer-wrap{
    z-index: 1200;
}
.project-page-drawer /deep/ .ivu-drawer-mask{
    z-index: 1200;
}
.project-page-drawer /deep/ .ivu-drawer-body{
    overflow: inherit;
}
.chose-wrap{
    display: flex;
    justify-content: space-between;
    padding: 3px 8px;
    background-color: var(--table-tr-hover-color);
    align-items: center;
    margin-top: 10px;
}
.deviceDrawer {
    z-index: 999999;
}
</style>
